<template>
  <div class="details">
    <Popup :popupVisible="true" :back="back" :source="this.$store.state.roomsource">
      <!--轮播图-->
      <van-swipe style="height:17rem">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <!---->
      <h2>整租|艺苑7号院</h2>
      <div class="price">
        <span>¥2500 /月</span>
        <span>服务费:180.00元/月</span>
      </div>
      <!--tag-->
      <div class="tag">
        <van-tag
          type="default"
          plain
          size="large"
          v-for="(item, index) of tagArr"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
      <!--intr-->
      <div class="intr">
        <div class="hx" v-for="(item, index) of intrArr" :key="index">
          <div class="top">
            <span>{{ item.top }}</span>
          </div>
          <div class="bottom">
            <span>{{ item.bottom }}</span>
          </div>
        </div>
      </div>
      <!---->
      <div class="length">
        <span>距离地铁园站直线距离1017米</span>
      </div>
      <!--table-->
      <div class="table" v-for="(item, index) of tableArr" :key="index">
        <div class="item">
          <span>{{ item.title[0] }}</span>
          <span>{{ item.message[0] }}</span>
        </div>
        <div class="item">
          <span>{{ item.title[1] }}</span>
          <span>{{ item.message[1] }}</span>
        </div>
      </div>
      <!---->
      <div class="wayto">
        <div class="way">
          <span>位于果园地铁梨园站直线距离1017米</span>
        </div>
        <div class="way">
          <span>设置地址 设置工作 常用地址查看交通路线</span>
        </div>
      </div>
      <!---->
      <h3>房屋设施</h3>
      <div class="room">
        <div
          class="installation"
          v-for="(item, index) of installationArr"
          :key="index"
        >
          <div class="pic">
            <img :src="item.pic" />
          </div>
          <div class="jiaju">
            <span>{{ item.jiaju }}</span>
          </div>
        </div>
      </div>
      <!---->
      <h3 class="likes">猜你喜欢</h3>
      <Roommate></Roommate>
      <!--fixed-->
      <div class="bottombar">
        <div class="collect" @click="collecteRoom">
          <span> {{collecText}} </span>
        </div>
        <div class="online" @click="linkPrivateChat">
          <span> 在线咨询 </span>
        </div>
        <div class="phonechart" @click="addOrder">
          <span> 预约看房 </span>
        </div>
      </div>
    </Popup>
  </div>
</template>
<script>
import Popup from "./Popup.vue";
import Roommate from './Roommate.vue';
export default {
  mounted() {
    if (this.$route.params.parent) {
      this.back = this.$route.params.parent;
    }
    if(this.$route.params.hid){
      this.hid=this.$route.params.hid;
      console.log(this.hid);
    }
  },

  components: {
    Popup,
    Roommate,
  },
  methods: {
    collecteRoom(){
      if(this.collecText=="收藏"){

      this.collecText = "已收藏"
      
      console.log(this.collecText)
      } else{
        this.collecText = "收藏"
      }
    },
    linkPrivateChat(){
      this.$router.push({name:"WebSocketTest",params:{parent:"roomDetails"}})
    },
    addOrder() {
      this.$router.push({ name: "order" , params:{hid: this.hid}});
    },
  },
  data() {
    return {
      hid: '',
      collecText:"收藏",
      back: "Renting",
      installationArr: [
        {
          pic: "",
          jiaju: "床",
        },
        {
          pic: "",
          jiaju: "空调",
        },
        {
          pic: "",
          jiaju: "洗衣机",
        },
      ],
      tableArr: [
        {
          title: ["起租", "可签约至"],
          message: ["2021-05-15", "2022-05"],
        },
        {
          title: ["楼层", "看房时间"],
          message: ["底楼层/共6层", "随时看房"],
        },
        {
          title: ["电梯", "供暖"],
          message: ["无电梯", "--"],
        },
        {
          title: ["小区", "位置"],
          message: ["艺苑西街79号", "通州区-果园"],
        },
      ],
      intrArr: [
        {
          top: "户型",
          bottom: "1室1厅1卫",
        },
        {
          top: "面积",
          bottom: "41m²",
        },
        {
          top: "朝向",
          bottom: "南",
        },
      ],
      images: [
        require( "../assets/img/roomshow/show1.jpg"),
        
        require( "../assets/img/roomshow/show2.jpg"),

       ,
      ],
      tagArr: ["近地铁", "采光好", "整租", "相寓好房"],
    };
  },
};
</script>
<style>
.roomdetails .Chum {
  margin-bottom: 33rem;
}
</style>
<style lang="less">
.details {
  h2 {
    padding: 3%;
    margin-top: 20px;
    font-weight: 550;
  }
  .price {
    padding: 3%;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    height: 25px;
    line-height: 25px;
    span:first-child {
      font-size: 25px;
      font-weight: 600;
      color: orangered;
    }
    span:last-child {
      font-size: 14px;
      color: gray;
    }
  }
  .tag {
    padding: 5px;
    .van-tag {
      padding: 2%;
      font-size: 20px;
      font-weight: 600;
      color: orangered;
      margin-top: 5px;
      margin-right: 10px;
    }
  }
  .intr {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    .hx {
      .top {
        text-align: center;
        span {
          color: gray;
          font-size: 18px;
        }
      }
      .bottom {
        text-align: center;
        span {
          font-size: 20px;
          font-weight: 600;
        }
      }
    }
  }
  .length {
    margin: 25px 3%;
    padding: 3%;
    margin-top: 25px;
    font-size: 18px;
    background-color: #e8e8e8;
    border-radius: 10px;
    background-image: url(../assets/img/map/mapshow1.png);
  }
  .table {
    padding: 5%;
    display: flex;
    justify-content: space-between;
    .item {
      span {
        margin: 10px;
      }
      span:first-child {
        color: gray;
      }
    }
  }
  .wayto {
    display: flex;
    padding: 5%;
    .way {
      background-color: #e8e8e8;
      margin: 5px;
      height: 60px;
      
    // background-image: url(../assets/img/map/mapshow.png);
      span {
        font-size: 15px;
        line-height: 30px;
        padding-left: 2px;
      }
    }
  }
  h3 {
    padding: 0 5%;
  }
  .room {
    padding: 3% 5%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .installation {
      margin-top: 10px;
      width: 80px;
      height: 80px;
      .pic {
        width: 80px;
        height: 55px;
      }
      .jiaju {
        text-align: center;
      }
    }
  }
  .bottombar {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 5%;
    // margin-top: 10px;
    display: flex;
    justify-content: space-between;
    height: 3rem;
    background-color: rgb(250, 248, 248);
    .collect {
      height: 30px;
      width: 25%;
      // padding: 5px 0;
      text-align: center;
      background-color: rgb(207, 29, 29);
      border-radius: 10px;
      span {
        line-height: 30px;
        font-size: 20px;
        color: #fff;
      }
    }
    .online,
    .phonechart {
      height: 30px;
      width: 35%;
      text-align: center;
      // padding: 5px 0;
      span {
        line-height: 30px;
        font-size: 20px;
        color: #fff;
      }
    }
    .online {
      background-color: orangered;
      border-radius: 10px;
    }
    .phonechart {
      background-color: #007d65;
      border-radius: 10px;
    }
  }
}
</style>